<!--  碳排放因子库-碳排放因子库 -->

<template>
  <div class="">
    <div class="list_card_content_item" :class="{'list_card_content_item_active':isSame}">
      <img class="list_card_content_item_copyIcon m_hoverCP" src="../../assets/img/img8.png" alt=""
           @click.stop="onCopy(item)"/>
      <img class="list_card_content_item_collectIcon m_hoverCP" src="../../assets/img/img11.png" alt=""
           @click.stop="onCollect(item)" v-if="item.collectStatus === '1' && item.type == 1"/>
      <img class="list_card_content_item_collectIcon m_hoverCP" src="../../assets/img/img12.png" alt=""
           @click.stop="onCollect(item)" v-if="item.collectStatus === '0' && item.type == 1"/>
      <div class="list_card_content_item_box1">
        <img class="list_card_content_item_box1_icon" src="../../assets/img/img6.png" alt=""/>
        <div class="list_card_content_item_box1_text">
          <div class="list_card_content_item_box1_text2 m_pass_1line_hidden2" :title="item.name"> {{ item.name }}</div>
          <div class="list_card_content_item_box1_text3 m_pass_1line_hidden2" :title="item.model">
            {{ item.model }}
          </div>
        </div>
      </div>
      <div class="list_card_content_item_box2"> {{ (Number(item.factorValue)).toFixed(4) }} <span>
        {{ item.numeratorUnit }}/{{ item.denominatorUnit }}</span></div>
      <div class="list_card_content_item_box3">
        <div class="list_card_content_item_box4_text" :title="item.productClassification_dictText"> {{ item.productClassification_dictText || '-' }}</div>
        <div class="list_card_content_item_box4_text2" :title="item.scene"> {{getContent(item.scene)}}</div>
      </div>

      <div class="list_card_content_item_box4">
        <div class="list_card_content_item_box4_text" > {{ item.releaseOrg || '-' }}</div>
        <div class="list_card_content_item_box4_text2"> {{ item.releaseYear || '-' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {copyText} from "@/utils/util"
import {deleteAction, getAction} from "@api/manage";
import Vue from "vue";
import {ACCESS_TOKEN} from "@/store/mutation-types";

export default {
  props: {
    item: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    },
    isSame: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      token: Vue.ls.get(ACCESS_TOKEN),
    };
  },
  created() {
  },
  methods: {
    getContent(content){
      if (!content){
        return "-"
      }
      //超过五个字就截取
      if(content.length > 5){
        return content.substring(0,5)+"..."
      }
      return content
    },
    /**
     * 复制
     */
    onCopy(item) {
      let copyMsg = `${item.name} ${item.factorValue} ${item.numeratorUnit}/${item.denominatorUnit}`
      copyText(copyMsg)
    },
    /**
     * 收藏
     */
    onCollect(item) {
      if (!this.token) {
        this.$message.warning(this.$t('message.Please_log_in'))
        this.$router.push('/user/login');
        return
      }
      if (item.collectStatus === '1') {
        // 取消收藏
        deleteAction('/CyEmissionFactorCollect/cyEmissionFactorCollect/delete', {
          id: item.id,
        }).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('message.delete_collect_success'))
            this.$emit('change')
          }
        });
      } else if (item.collectStatus === '0') {
        // 收藏
        getAction('/CyEmissionFactorCollect/cyEmissionFactorCollect/add', {
          id: item.id,
        }).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('message.collect_success'))
            this.$emit('change')
          }
        });
      }
    },
  },
};

</script>

<style lang="less" scoped>
.list_card_content_item {
  box-sizing: border-box;
  overflow: hidden;
  height: 160px;
  position: relative;
  border-radius: 5px;
  border: 1px solid #148958;
  background-image: url("../../assets/img/img1.1.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.list_card_content_item:hover {
  box-shadow: 2px 4px 8px rgba(2, 27, 11, 0.2);
}

.list_card_content_item_active {
  outline: 3px solid #148958;
}

.list_card_content_item_copyIcon {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 41px;
  width: 18px;
  height: 18px;
}

.list_card_content_item_collectIcon {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  width: 18px;
  height: 18px;
}

.list_card_content_item_box1 {
  margin-top: 12px;
  margin-left: 16px;
  display: flex;
  align-items: center
}

.list_card_content_item_box1_icon {
  width: 24px;
  height: 24px;
}

.list_card_content_item_box1_text {
  margin-left: 12px;
  display: flex;
  align-items: flex-end;
}

.list_card_content_item_box1_text2 {
  max-width: 150px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  line-height: 20px;
}

.list_card_content_item_box1_text3 {
  margin-left: 8px;
  max-width: 110px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
}

.list_card_content_item_box2 {
  margin-top: 12px;
  margin-left: 52px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 28px;
  color: #148958;


  span {
    font-size: 12px;
  }
}

.list_card_content_item_box3 {
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list_card_content_item_box4 {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 33px;
  background: #148958;
  border-radius: 0px 0px 4px 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
}

.list_card_content_item_box4_text {
}

.list_card_content_item_box4_text2 {
}
</style>
